<template>
  <div>
    <Row class="banner">
      <h1>安全评估分析</h1>
      <h2>综合远程物联网数据与气象数据，评估各部位安全情况</h2>
    </Row>
    <div class="section">
      <Row :gutter="16" type="flex" justify="start" class="row">
        <Col span="6">
          <Card shadow>
            <p slot="title">
              <span>安全情况总览</span>
            </p>
            <div class="chart" id="chart-safe-abstract"></div>
            <Divider />
            <span class="text">总纳入监管单位数:{{totalCount}}</span>
            <Spin v-if="loading.safeAbstract" fix size="large"></Spin>
          </Card>
        </Col>

        <Col span="6">
          <Card shadow>
            <p slot="title">
              <span>区域隐患情况</span>
            </p>
            <div class="chart" id="chart-danger-district"></div>
            <Divider />
            <span class="text">产生隐患单位数：{{warnedCount}}</span>
            <Spin v-if="loading.dangerDistrict" fix size="large"></Spin>
          </Card>
        </Col>

        <Col span="6">
          <Card shadow>
            <p slot="title">
              <span>隐患类型分布</span>
            </p>
            <div class="chart" id="chart-danger-classify"></div>
            <Divider />
            <span class="text">隐患集中单位类型：{{warnedType}}</span>
            <Spin v-if="loading.dangerClassify" fix size="large"></Spin>
          </Card>
        </Col>

        <Col span="6">
          <Card shadow>
            <p slot="title">
              <span>隐患解决情况</span>
            </p>
            <div class="chart" id="chart-resolve"></div>
            <Divider />
            <span class="text">隐患解决率：{{resolvePercentage}}%</span>
            <Spin v-if="loading.resolve" fix size="large"></Spin>
          </Card>
        </Col>
      </Row>

      <Row class="row" :gutter="16">
        <Col span="24">
          <Card>
            <p slot="title">
              <span class="box-header">部位安全评估分析清单</span>
            </p>

            <ul class="toolbar" slot="extra">
              <li class="item">
                <Input
                  v-model="keyword"
                  placeholder="请输入部位名称开始搜索"
                  style="width:260px"
                  :search="true"
                  enter-button="立即搜索"
                  size="default"
                  @on-search="renderTable(0)"
                />
              </li>
              <li class="item">
                <Button icon="mg-cog" @click="showRuleConfigWindow" size="default">评估规则配置</Button>
              </li>
            </ul>

            <Table :columns="tableColumn" :data="tableData"></Table>
            <Divider />
            <Page :total="pageCount" show-elevator @on-change="renderTable" />
            <Spin v-if="loading.table" fix size="large"></Spin>
          </Card>
        </Col>
      </Row>
    </div>
    <Modal
      v-model="showModalDetail"
      :title="modalTitleDetail"
      width="1300"
      scrollable
      :footer-hide="true"
    >
      <dl-safe-evaluate ref="report"></dl-safe-evaluate>
    </Modal>
    <Modal
      v-model="showModalConfig"
      :title="modalTitleConfig"
      width="600"
      scrollable
      :footer-hide="true"
    >
      <dl-rule-config ref="rule-config"></dl-rule-config>
    </Modal>
  </div>
</template>

<script>
window.$vue = {};
import axios from "axios";
import safeEvaluateModal from "@/views/fire-monitor/safe-evaluate-modal";
import safeRuleConfigModal from "@/views/fire-monitor/safe-rule-config-modal";

export default {
  data() {
    return {
      rule: {
        safeLevel: { min: 100, max: 100 },
        slightLevel: { min: 80, max: 99 },
        mediumLevel: { min: 60, max: 79 },
        severityLevel: { min: 0, max: 59 }
      },
      tableColumn: [
        {
          title: "序号",
          key: "index",
          align: "center",
          width: 80
        },
        {
          title: "操作",
          key: "operation",
          align: "center",
          width: 160,
          render(h, params) {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "default"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: t => {
                    //数据在params.row里
                    window.$vue.openModal(params.row);
                  }
                }
              },
              "查看评估报告"
            );
          }
        },
        { title: "部位名称", key: "comName", align: "center" },
        {
          title: "安全评分",
          key: "score",
          align: "center",
          width: 100,
          render(h, params) {
            let color = null;
            let number = params.row.score;
            if (
              number >= $vue.rule.safeLevel.min &&
              number <= $vue.rule.safeLevel.max
            ) {
              color = "#19be6b";
            } else if (
              number >= $vue.rule.slightLevel.min &&
              number <= $vue.rule.slightLevel.max
            ) {
              color = "#e6b600";
            } else if (
              number >= $vue.rule.mediumLevel.min &&
              number <= $vue.rule.mediumLevel.max
            ) {
              color = "#fa7c00";
            } else if (
              number >= $vue.rule.severityLevel.min &&
              number <= $vue.rule.severityLevel.max
            ) {
              color = "#ed4014";
            } else {
              color = "#333";
            }
            return h("span", { style: { color: color } }, params.row.score);
          }
        },
        {
          title: "预警等级",
          key: "level",
          width: 100,
          align: "center",
          render(h, params) {
            let text = null;
            let color = null;
            let number = params.row.score;
            if (
              number >= $vue.rule.safeLevel.min &&
              number <= $vue.rule.safeLevel.max
            ) {
              text = "安全";
              color = "#19be6b";
            } else if (
              number >= $vue.rule.slightLevel.min &&
              number <= $vue.rule.slightLevel.max
            ) {
              text = "轻微告警";
              color = "#e6b600";
            } else if (
              number >= $vue.rule.mediumLevel.min &&
              number <= $vue.rule.mediumLevel.max
            ) {
              color = "#fa7c00";
              text = "中等告警";
            } else if (
              number >= $vue.rule.severityLevel.min &&
              number <= $vue.rule.severityLevel.max
            ) {
              color = "#ed4014";
              text = "严重告警";
            } else {
              color = "#333";
              text = "无告警信息";
            }

            return h("span", { style: { color: color } }, text);
          }
        },
        { title: "所属区划", key: "districtName", align: "center" },
        {
          title: "消防安全负责人",
          key: "chargerName",
          align: "center",
          width: 160
        },
        { title: "联系方式", key: "chargerPhone", align: "center" }
      ],
      tableData: [],
      pageCount: 0,

      keyword: null,
      option: {
        safeAbstract: null,
        dangerDistrict: null,
        dangerClassify: null,
        resolve: null
      },
      chartInstance: {
        safeAbstract: null,
        dangerDistrict: null,
        dangerClassify: null,
        resolve: null
      },
      loading: {
        safeAbstract: false,
        dangerDistrict: false,
        dangerClassify: false,
        resolve: false,
        table: false
      },
      totalCount: 0,
      warnedCount: 0,
      warnedType: null,
      resolvePercentage: 0,
      showModalDetail: false,
      showModalConfig: false,
      modalDataDetail: null,
      modalTitleDetail: null,
      modalTitleConfig: null,
      modalDataConfig: null
    };
  },
  components: {
    "dl-safe-evaluate": safeEvaluateModal,
    "dl-rule-config": safeRuleConfigModal
  },
  created() {
    window.$vue = this;
    this.loadRuleConfig();
    this.$bus.on("close-config-modal", flag => {
      if (flag) {
        this.showModalConfig = false;
      }
    });
    this.$bus.on("rule-changed", flag => {
      if (flag) {
        this.loadRuleConfig();
        this.renderTable(0);
      }
    });
  },
  destroyed() {
    window.$vue = {};
  },
  methods: {
    loadRuleConfig() {
      if (localStorage.ruleConfig) {
        let ruleData = JSON.parse(localStorage.ruleConfig);
        this.rule.slightLevel = ruleData.slightLevel
          ? ruleData.slightLevel
          : this.rule.slightLevel;
        this.rule.safeLevel = ruleData.safeLevel
          ? ruleData.safeLevel
          : this.rule.safeLevel;
        this.rule.mediumLevel = ruleData.mediumLevel
          ? ruleData.mediumLevel
          : this.rule.mediumLevel;
        this.rule.severityLevel = ruleData.severityLevel
          ? ruleData.severityLevel
          : this.rule.severityLevel;
      }
    },
    renderChart_SafeAbstract() {
      this.loading.safeAbstract = true;
      this.option.safeAbstract = {
        legend: {
          top: "top",
          left: "center",
          orient: "horizontal",
          data: ["未产生告警", "产生告警"],
          textStyle: { fontSize: 12 }
        },
        tooltip: { show: true, trigger: "item", formatter: "{a} - {b}:{c}" },
        color: ["#00cf33", "#ffe300", "#fa7c00", "#fa2200"],
        series: [
          {
            name: "总体安全情况",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}:\n{c}家"
              }
            }
          }
        ]
      };
      let params = {
        indexDate: this.dateShift(0) + " 23:59:59"
      };
      axios
        .get(this.URLHEAD_TA + "ICoordinatesTitle", {
          params: params
        })
        .then(res => {
          let json = res.data;
          this.totalCount = json.Data.superviseCount;
          this.option.safeAbstract.series[0].data = [
            { name: "未产生告警", value: json.Data.safetyCount },
            {
              name: "产生告警",
              value: json.Data.superviseCount - json.Data.safetyCount
            }
            /*{ name: "中等告警", value: json.Data.mediumCount },
            { name: "严重告警", value: json.Data.severityCount }*/
          ];
          this.$Crender("chart-safe-abstract", this.option.safeAbstract);
          this.loading.safeAbstract = false;
        });
    },
    renderChart_DangerDistrict() {
      this.loading.dangerDistrict = true;
      this.option.dangerDistrict = {
        legend: {
          top: "top",
          left: "center",
          orient: "horizontal",
          data: [],
          textStyle: { fontSize: 12 },
          itemWidth: 12,
          itemHeight: 12
        },
        tooltip: { show: true, trigger: "item", formatter: "{a} - {b}:{c}" },
        color: this.COLORS.reverse(),
        series: [
          {
            name: "区域隐患情况",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}:\n{c}家"
              }
            }
          }
        ]
      };
      let params = {
        startTime: this.dateShift(0) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59"
      };
      axios
        .get(this.URLHEAD_DVS + "IDangerAreaDistribution", {
          params: params
        })
        .then(res => {
          let json = res.data;
          this.option.dangerDistrict.legend.data = json.Data.map(o => {
            return o.name;
          });
          this.option.dangerDistrict.series[0].data = json.Data.map(o => {
            this.warnedCount = this.warnedCount + o.value3;
            return { name: o.name, value: o.value3 };
          });
          this.$Crender("chart-danger-district", this.option.dangerDistrict);
          this.loading.dangerDistrict = false;
        });
    },
    renderChart_DangerClassify() {
      this.loading.dangerClassify = true;
      this.option.dangerClassify = {
        legend: {
          top: "top",
          left: "center",
          orient: "horizontal",
          data: [],
          textStyle: { fontSize: 12 },
          itemWidth: 12,
          itemHeight: 12
        },
        tooltip: { show: true, trigger: "item", formatter: "{a} - {b}:{c}" },
        color: this.COLORS.reverse(),
        series: [
          {
            name: "隐患类型分布",
            type: "pie",
            radius: ["40%", "50%"],
            center: ["50%", "50%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}:\n{c}家"
              }
            }
          }
        ]
      };
      let params = {
        startTime: this.dateShift(0) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59"
      };
      axios
        .get(this.URLHEAD_DVS + "getDangerTypeAnalysis", { params: params })
        .then(res => {
          let json = res.data;
          this.option.dangerClassify.legend.data = json.Data.list.map(o => {
            return o.name;
          });
          this.option.dangerClassify.series[0].data = json.Data.list;
          this.warnedType = json.Data.Value;
          this.$Crender("chart-danger-classify", this.option.dangerClassify);
          this.loading.dangerClassify = false;
        });
    },
    renderChart_resolve() {
      this.loading.resolve = true;
      this.option.resolve = {
        legend: {
          top: "top",
          left: "center",
          orient: "horizontal",
          data: ["未解决隐患单位", "已解决隐患单位"],
          textStyle: { fontSize: 12 },
          itemWidth: 12,
          itemHeight: 12
        },
        tooltip: { show: true, trigger: "item", formatter: "{a} - {b}:{c}" },
        color: [this.COLORS[7], "#999"].reverse(),
        series: [
          {
            name: "隐患解决情况",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}:\n{c}家"
              }
            }
          }
        ]
      };
      let params = {
        startTime: this.dateShift(0) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59"
      };
      axios
        .get(this.URLHEAD_DVS + "getDangerTimeSpread", { params: params })
        .then(res => {
          let json = res.data;
          this.option.resolve.series[0].data = [
            {
              name: "未解决隐患单位",
              value: json.Data.list[0].value - json.Data.list[0].value2
            },
            {
              name: "已解决隐患单位",
              value: json.Data.list[0].value2
            }
          ];
          this.resolvePercentage = (
            json.Data.list[0].value2 / json.Data.list[0].value
          ).toFixed(1);
          this.$Crender("chart-resolve", this.option.resolve);
          this.loading.resolve = false;
        });
    },
    renderTable(index) {
      this.loading.table = true;
      let params = {
        pageIndex: index,
        pageSize: 10,
        /* TODO:等GetAQXXNew改成实时数据后，再把这里的dateShift(-1) 改成dateShift(0)*/
        indexDate: this.dateShift(0),
        bwmc: this.keyword
      };
      axios
        .get(this.URLHEAD_TA + "ICoordinates", { params: params })
        .then(res => {
          let json = res.data;
          this.tableData = json.Data.map((o, i) => {
            return {
              index: i + 1,
              comName: o.MC === "" ? "暂无信息" : o.MC,
              districtName: o.SSQH === "" ? "暂无信息" : o.SSQH,
              chargerName: o.AQFZR === "" ? "暂无信息" : o.AQFZR,
              chargerPhone: o.PHONE === "" ? "暂无信息" : o.PHONE,
              score: o.FS,
              level: o.YHDJ,
              comID: o.Data_ID,
              countryName: o.Country
            };
          });
          this.pageCount = json.count;
          this.loading.table = false;
        });
    },
    openModal(data) {
      this.showModalDetail = true;
      //this.modalData = data;
      this.modalTitleDetail = `${data.comName} - 单位安全评估报告`;
      this.$refs.report.query(data);
    },
    showRuleConfigWindow() {
      this.showModalConfig = true;
      this.modalTitleConfig = "安全评估规则配置";
    },
    refreshView() {
      this.renderChart_SafeAbstract();
      this.renderChart_DangerDistrict();
      this.renderChart_DangerClassify();
      this.renderChart_resolve();
      this.renderTable(0);
    }
  },
  mounted() {
    this.refreshView();
  }
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 325px;
}
</style>
